/*
 * @Author: liu.lin liu.lin@hzleaper.com
 * @Date: 2023-11-08 17:10:31
 * @LastEditors: liu.lin liu.lin@hzleaper.com
 * @LastEditTime: 2023-11-10 17:23:07
 * @FilePath: \react_ts\src\pages\Excel\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { FC, useEffect } from "react";
// import { PoweroffOutlined } from "@ant-design/icons";
import { Button, Space, Table, Tag } from "antd";
// import { DownloadOutlined } from "@ant-design/icons";
import type { ColumnsType } from "antd/es/table";
import React, { useState } from "react";
import { DataType } from "./index.type";
import "./index.css";

const columns: ColumnsType<DataType> = [
  {
    title: "序号",
    dataIndex: "key",
    key: "key",
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "地址",
    dataIndex: "address",
    key: "address",
  },
];

function generateRandomData(n: number): Array<DataType> {
  const names = ["John Brown", "Jim Green", "Joe Black"];
  const addresses = ["四川广元市", "四川成都市", "四川绵阳市"];

  const data: Array<DataType> = [];
  for (let i = 0; i < n; i++) {
    const item = {
      key: String(i + 1),
      name: getRandomName(names),
      age: getRandomAge(),
      address: getRandomAddress(addresses),
    };
    data.push(item);
  }
  return data;
}

/**
 * @description:
 * @param {string} names
 * @return {*}
 */
function getRandomName(names: string[]): string {
  return names[Math.floor(Math.random() * names.length)];
}

/**
 * @description:
 * @param {*} number
 * @return {*}
 */
function getRandomAge(): number {
  return Math.floor(Math.random() * 41) + 20; // Random age between 20 and 60
}

/**
 * @description:
 * @param {string} addresses
 * @return {*}
 */
function getRandomAddress(addresses: string[]): string {
  return addresses[Math.floor(Math.random() * addresses.length)];
}

// 这个页面根据业务来自行设计吧
const Excel: FC = () => {
  const [loadings, setLoadings] = useState<boolean>(false);
  const [tableDatas, setTableDatas] = useState<DataType[]>([]);
  useEffect(() => {
    const data: Array<DataType> = generateRandomData(1000000);
    console.log(data);
    setTableDatas(data);
  }, []);
  return (
    <div className="excel">
      <div className="excel_all">
        <div className="excel_header">
          {/* <Button type="primary" icon={<DownloadOutlined />} loading={loadings}>
            导出
          </Button> */}
        </div>
        <div className="excel_content">
          <Table columns={columns} dataSource={tableDatas} />
        </div>
      </div>
    </div>
  );
};
export default Excel;
